<template>
  <section>
    <div
      class="row-start-center py-[15px] text-[14px] border-bottom text-[#444] px-[15px]"
      @click="handleItemClick"
    >
      <div class="w-[20%] text-center box-border px-[4px]">
        <div class="truncate">
          {{ item.Note || "--" }}
        </div>
      </div>
      <div class="w-[25%] text-center box-border px-[4px]">
        <div class="text-[#888] truncate">
          {{ item.Name || "--" }}
        </div>
      </div>
      <div
        class="w-[22.5%] text-center break-all box-border px-[4px]"
        :class="{
          'text-red': item.Coin < 0,
          'text-blue': item.Coin > 0
        }"
      >
        {{ formatCurrency(item.Coin) }}
      </div>
      <div
        class="w-[22.5%] text-center break-all box-border px-[4px]"
        :class="{
          'text-red': item.Coin < 0,
          'text-blue': item.Coin > 0
        }"
      >
        {{ formatCurrency(item.BetAmount) }}
      </div>
      <div class="w-[10%] text-blue">详情</div>
    </div>
    <BackwaterItemDetailPopup
      :isBack="isBack"
      ref="BackwaterItemDetailPopupRef"
      :uid="item.UserId"
    />
  </section>
</template>
<script setup lang="ts">
import BackwaterItemDetailPopup from "./backwater-item-detail-popup.vue";
import { formatCurrency } from "@/utils/common";

const BackwaterItemDetailPopupRef = ref();

withDefaults(
  defineProps<{
    item: ReportRebateMo;
    isBack?: "0" | "1";
  }>(),
  {}
);
const handleItemClick = () => {
  BackwaterItemDetailPopupRef.value?.open();
};
</script>
